<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温馨提示弹窗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'KaiTi', 'SimKai', Arial, sans-serif;
            overflow: hidden;
        }

        .popup {
            position: fixed;
            width: 250px;
            height: 150px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            cursor: move;
            opacity: 0.95;
            transition: opacity 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 3000; /* 提高z-index确保弹窗显示在最上层 */
            overflow: visible;
            pointer-events: auto;
            transform-origin: center;
        }
        
        /* 拖动时提高层级 */
        .popup.dragging {
            z-index: 5000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        /* 鼠标悬停时的果冻弹跳效果 */
        .popup:hover:not(.dragging) {
            animation: jelly 0.6s ease-in-out;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        /* 果冻动画关键帧 */
        @keyframes jelly {
            0%, 100% {
                transform: scale(1);
            }
            25% {
                transform: scale(1.05, 0.95);
            }
            50% {
                transform: scale(0.95, 1.05);
            }
            75% {
                transform: scale(1.02, 0.98);
            }
        }

        .popup:hover {
            opacity: 0.98;
        }

        .popup-title {
            padding: 10px 15px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px solid;
        }

        .popup-content {
            flex: 1;
            padding: 15px;
            display: flex;
            align-items: center;
            font-size: 14px;
            overflow: hidden;
            position: relative;
        }

        .marquee {
            white-space: nowrap;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        @keyframes marquee {
            from {
                transform: translateY(-50%) translateX(0);
            }

            to {
                transform: translateY(-50%) translateX(calc(-100% - 30px));
                /* 减去自身宽度并添加一些缓冲 */
            }
        }

        .fade-out {
            animation: fadeOut 1s forwards;
        }

        @keyframes fadeOut {
            from {
                opacity: 0.95;
            }

            to {
                opacity: 0;
            }
        }

        .button-container {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 2000;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s;
        }
        
        /* 清除所有弹窗按钮 */
        button[onclick="clearAllPopups()"] {
            background-color: rgba(255, 107, 107, 0.9); /* 增加透明度 */
            position: relative;
            z-index: 6000; /* 优先级最高 */
        }
        
        /* 清除按钮悬停效果 */
        button[onclick="clearAllPopups()"]:hover {
            background-color: rgba(255, 87, 87, 0.95);
        }

        button:hover {
            background-color: #45a049;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        input[type="number"] {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 4px;
            margin: 5px;
            width: 120px;
        }

        input[type="number"]:focus {
            outline: none;
            border-color: #4CAF50;
        }
    </style>
</head>

<body>
    <div class="button-container">
        <input type="number" id="popupCount" min="1" max="500" value="100" placeholder="输入弹窗数量">
        <button onclick="showPopupsCustom(true)">显示弹窗(跑马灯)</button>
        <button onclick="showPopupsCustom(false)">显示弹窗(换行)</button>
        <button onclick="clearAllPopups()">清除所有弹窗</button>
    </div>

    <script>
        // 随机文本列表
        const RANDOM_TEXTS = [
            "今天天气真好！", "保持好心情！", "继续加油！", "你已经做得很棒了！",
            "慢慢来，不着急，我支持你。", "每一天都是新的开始，加油！",
            "你的努力，总有一天会被看见。", "相信自己，你远比自己想象的更强大。",
            "没关系的，一切都会好起来的。", "如果累了，就允许自己休息一下。",
            "你已经很棒了，别太苛求自己。", "事情总会一件一件解决的。",
            "深呼吸，先专注当下这一刻。", "你本身就是一道光。",
            "无论发生什么，你都不是一个人。", "生活虽然普通，但也要乐在其中。",
            "今天也会有好事发生的。", "你值得所有美好的事物。",
            "向前看，好运气正在路上呢！", "打起精神来，惊喜可能就在下一秒。",
            "你是最棒的，没什么能难倒你！", "像太阳一样，暖暖地发光吧！",
            "继续保持你的可爱，世界都会对你微笑。", "每一步都是进步，无论多小。",
            "你的存在让世界变得更美好。", "困难只是暂时的，你会克服的。",
            "给自己一个微笑，心情会变好的。", "你已经走了很远的路，真了不起！",
            "相信过程，结果会自然到来。", "你的坚韧让人敬佩。",
            "今天也是充满希望的一天！", "小小的挫折是为了更大的成功。",
            "你的笑容很有感染力，多笑笑吧！", "一切都在慢慢变好，你能感受到的。",
            "你是独一无二的，这本身就很有价值。", "保持耐心，美好的事物值得等待。",
            "你的善良和努力都不会被辜负。", "每一天都是改变的机会。",
            "你比昨天又进步了一点呢！", "放轻松，事情没有想象中那么难。",
            "你的潜力是无限的，继续挖掘吧！", "阳光总在风雨后，坚持就是胜利。",
            "你正在成为更好的自己，这很酷！", "生活因你而更加精彩。",
            "别忘了，你一直都很优秀。", "今天的你也很努力，辛苦了！",
            "好事正在酝酿，准备迎接吧！", "你的坚持终将收获美好。",
            "保持积极，好运自然会来。", "你是生活的勇士，继续前进！",
            "每一个今天都是余生的第一天。", "你的温暖能融化所有冰雪。",
            "慢慢来，比较快。", "你已经很棒了，我为你骄傲！",
            "未来可期，你值得最好的。", "你的能量超乎你想象。",
            "一切都是最好的安排。", "爱你所爱，行你所行。",
            "心若向阳，无畏悲伤。", "你就是自己的太阳。",
            "生活很美好，记得停下来欣赏。", "你的进步我看在眼里，喜在心里。",
            "别担心，你有能力处理好一切。", "每一天都是上天赐予的礼物。",
            "你的勇气让人钦佩。", "相信自己的选择，它们都有意义。",
            "微笑是最好的化妆品。", "你让周围的人都感到温暖。",
            "坚持做自己，就是最棒的。", "今天的困难是明天的财富。",
            "你的心态决定你的世界。", "放松心情，享受当下的宁静。",
            "你有改变世界的力量。", "每一次尝试都是一次成长。",
            "你是如此特别，值得被珍惜。", "放下包袱，轻装上阵。",
            "你的热情能感染每一个人。", "感恩遇见，珍惜拥有。",
            "你比想象中更坚强。", "美好正在悄悄靠近你。",
            "给自己一点掌声，你做得很好。", "乌云后面总是灿烂的阳光。",
            "你的善良是世界需要的温暖。", "保持好奇，发现生活的美。",
            "你有无限的可能性。", "简单的生活也有大大的幸福。",
            "你的努力不会被辜负。", "每一天都值得被认真对待。",
            "你是生命的舞者，跳出自己的精彩。", "放下过去，拥抱现在。",
            "你的存在就是最大的意义。", "保持希望，明天会更好。",
            "你有能力创造自己想要的生活。", "小小的幸福也值得庆祝。",
            "你的真诚是最感动人的品质。", "相信时间会给出最好的答案。",
            "你是如此勇敢，面对一切困难。", "内心的平静是最强大的力量。",
            "你的微笑能照亮整个世界。", "每一天都是重新开始的机会。",
            "你有让生活变得更美好的能力。", "保持谦逊，持续学习。",
            "你的坚持会开出最美的花。", "简单的心，快乐的生活。",
            "你是命运的主宰者。", "内心的光芒会指引你方向。",
            "你的善良终将得到回报。", "珍惜当下，感恩拥有。",
            "你有独特的魅力，自信展现。", "风雨过后必见彩虹。"
        ];

        // 背景颜色列表
        const BG_COLORS = [
            "#A65B52", "#8C4A45", "#B3726A", "#73575A",
            "#6D4F3F", "#5A4F4D", "#4A4A4F", "#3A4A5A",
            "#3F5A6F", "#3A5956", "#405A52", "#4A5D6A",
            "#5D536F", "#6A506F", "#7A6365", "#8C7A66",
            "#9C8B72", "#A99F93", "#8A8A7F", "#6B6B6B"
        ];

        // 文字颜色列表
        const TEXT_COLORS = [
            "#F8B4CB", "#FFA7A7", "#FFB8A8", "#F8D7C9",
            "#FFD4A4", "#FFE8A4", "#F5F0A3", "#D6E6B6",
            "#B8E0C3", "#A8E1E6", "#9CD0E6", "#A7C8E7",
            "#C4B9E6", "#D8BFD8", "#E6C9CA", "#E9D6BC",
            "#F0E2D3", "#E8EDDF", "#D2E5E1", "#DFECE9"
        ];

        // 存储所有弹窗元素
        let popups = [];

        // 生成随机文本
        function generateRandomText() {
            return RANDOM_TEXTS[Math.floor(Math.random() * RANDOM_TEXTS.length)];
        }

        // 生成随机颜色
        function generateRandomColor() {
            return BG_COLORS[Math.floor(Math.random() * BG_COLORS.length)];
        }

        // 获取文字颜色
        function getTextColor() {
            return TEXT_COLORS[Math.floor(Math.random() * TEXT_COLORS.length)];
        }

        // 生成随机位置
        function generateRandomPosition(width, height) {
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;

            const x = Math.floor(Math.random() * (screenWidth - width));
            const y = Math.floor(Math.random() * (screenHeight - height));

            return { x, y };
        }

        // 创建单个弹窗
        function createPopup(title = "温馨提示", width = 250, height = 150, displayTime = 10, marquee = true) {
            // 创建弹窗容器
            const popup = document.createElement("div");
            popup.className = "popup";
            popup.style.width = `${width}px`;
            popup.style.height = `${height}px`;

            // 设置随机颜色
            const bgColor = generateRandomColor();
            const textColor = getTextColor();

            popup.style.backgroundColor = bgColor;

            // 创建标题
            const titleEl = document.createElement("div");
            titleEl.className = "popup-title";
            titleEl.textContent = title;
            titleEl.style.color = textColor;
            titleEl.style.borderBottomColor = textColor;

            // 创建内容区域
            const contentEl = document.createElement("div");
            contentEl.className = "popup-content";
            contentEl.style.color = textColor;
            contentEl.style.position = "relative";

            // 添加到DOM
            popup.appendChild(titleEl);
            popup.appendChild(contentEl);

            // 创建文本元素
            const text = generateRandomText();
            const textEl = document.createElement("div");
            textEl.textContent = text;

            // 先添加到DOM以获取实际宽度
            contentEl.appendChild(textEl);

            if (marquee) {
                // 跑马灯模式
                textEl.className = "marquee";
                textEl.style.whiteSpace = "nowrap";
                textEl.style.position = "absolute";
                textEl.style.left = "100%"; // 从右侧开始

                // 强制回流以获取正确的尺寸
                requestAnimationFrame(() => {
                    const textWidth = textEl.offsetWidth;
                    const containerWidth = contentEl.offsetWidth;

                    if (textWidth > containerWidth) {
                        // 需要滚动
                        const totalDistance = textWidth + containerWidth;
                        const speed = 200; // 每秒滚动像素数
                        const duration = totalDistance / speed; // 计算动画持续时间

                        // 清除可能存在的动画
                        textEl.style.animation = 'none';

                        // 强制重绘
                        textEl.offsetHeight;

                        // 设置并启动动画
                        textEl.style.animation = `marquee ${duration}s linear infinite`;
                    } else {
                        // 文字长度不超过容器宽度，无需滚动
                        textEl.style.position = "relative";
                        textEl.style.textAlign = "center";
                        textEl.style.left = "0";
                    }
                });
            } else {
                // 换行模式
                textEl.style.whiteSpace = "normal";
                textEl.style.wordBreak = "break-word";
                textEl.style.overflow = "hidden";
                textEl.style.maxHeight = "100%";
                textEl.style.display = "flex";
                textEl.style.alignItems = "center";
                textEl.style.justifyContent = "center";
                textEl.style.textAlign = "center";
            }

            // 设置随机位置
            const pos = generateRandomPosition(width, height);
            popup.style.left = `${pos.x}px`;
            popup.style.top = `${pos.y}px`;

            // 添加拖拽功能
            makeDraggable(popup);
            
            // 添加鼠标悬停时置顶功能
            popup.addEventListener('mouseenter', function() {
                // 提高z-index使其显示在最前面
                popup.style.zIndex = '5000';
            });
            
            // 添加鼠标离开时恢复默认z-index
            popup.addEventListener('mouseleave', function() {
                // 如果不是正在拖动，则恢复默认z-index
                if (!popup.classList.contains('dragging')) {
                    popup.style.zIndex = '3000';
                }
            });

            // 添加到文档
            document.body.appendChild(popup);

            // 添加到弹窗列表
            popups.push(popup);

            // 设置自动关闭并保存计时器ID
            const timerId = setTimeout(() => {
                removePopup(popup);
            }, displayTime * 1000);
            timerIds.push(timerId);

            return popup;
        }

        // 跑马灯动画功能已被CSS动画替代

        // 使元素可拖拽
        function makeDraggable(element) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

            // 获取元素位置
            const dragMouseDown = (e) => {
                e = e || window.event;
                e.preventDefault();
                // 获取鼠标位置
                pos3 = e.clientX;
                pos4 = e.clientY;
                // 添加拖动类以提高层级
                element.classList.add('dragging');
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            };

            const elementDrag = (e) => {
                e = e || window.event;
                e.preventDefault();
                // 计算新位置
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                // 设置元素新位置
                element.style.top = (element.offsetTop - pos2) + "px";
                element.style.left = (element.offsetLeft - pos1) + "px";
                
                // 确保元素在可视区域内
                const rect = element.getBoundingClientRect();
                const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
                
                // 检查边界
                if (rect.left < 0) {
                    element.style.left = "0px";
                }
                if (rect.top < 0) {
                    element.style.top = "0px";
                }
                if (rect.right > viewportWidth) {
                    element.style.left = (viewportWidth - rect.width) + "px";
                }
                if (rect.bottom > viewportHeight) {
                    element.style.top = (viewportHeight - rect.height) + "px";
                }
            };

            const closeDragElement = () => {
                // 移除拖动类
                element.classList.remove('dragging');
                // 停止移动
                document.onmouseup = null;
                document.onmousemove = null;
            };

            // 添加拖拽事件
            element.onmousedown = dragMouseDown;
        }

        // 移除弹窗（带动画）
        function removePopup(popup) {
            // 添加淡出动画
            popup.classList.add("fade-out");

            // 动画结束后移除元素
            setTimeout(() => {
                if (popup.parentNode) {
                    popup.parentNode.removeChild(popup);
                }
                // 从列表中移除
                const index = popups.indexOf(popup);
                if (index > -1) {
                    popups.splice(index, 1);
                }
                
                // 检查是否所有弹窗都已移除
                if (popups.length === 0) {
                    // 所有弹窗都消失后重新显示按钮
                    showButtons();
                }
            }, 1000);
        }

        // 获取按钮容器元素
        const buttonContainer = document.querySelector('.button-container');
        const buttons = buttonContainer.querySelectorAll('button');
        const popupCountInput = document.getElementById('popupCount');

        // 隐藏按钮（保留清空按钮）
        function hideButtons() {
            buttons.forEach(button => {
                // 只隐藏前两个按钮（显示弹窗按钮），保留清空按钮
                if (button.textContent.includes('显示弹窗')) {
                    button.style.display = 'none';
                }
            });
            // 隐藏输入框
            popupCountInput.style.display = 'none';
        }

        // 显示按钮
        function showButtons() {
            buttons.forEach(button => {
                // 显示前两个按钮
                if (button.textContent.includes('显示弹窗')) {
                    button.style.display = 'inline-block';
                }
            });
            // 显示输入框
            popupCountInput.style.display = 'inline-block';
        }

        // 自定义弹窗数量显示函数
        function showPopupsCustom(marquee = true) {
            const countInput = document.getElementById('popupCount');
            let count = parseInt(countInput.value);
            
            // 验证输入值
            if (isNaN(count) || count < 1) {
                count = 1;
                countInput.value = 1;
            } else if (count > 500) {
                count = 500;
                countInput.value = 500;
            }
            
            showPopups(count, marquee);
        }

        // 存储所有计时器ID，用于后续清除
        let timerIds = [];

        // 显示多个弹窗
        function showPopups(count = 10, marquee = true) {
            // 隐藏按钮
            hideButtons();
            
            // 清除之前可能存在的计时器
            clearAllTimers();
            
            let currentCount = 0;
            const interval = 100; // 间隔100毫秒

            function createNextPopup() {
                if (currentCount < count) {
                    createPopup("♥温馨提示♥", 250, 150, 20, marquee);
                    currentCount++;
                    const timerId = setTimeout(createNextPopup, interval);
                    timerIds.push(timerId);
                }
            }

            // 开始创建第一个弹窗
            const firstTimerId = setTimeout(createNextPopup, 0);
            timerIds.push(firstTimerId);
        }

        // 清除所有计时器
        function clearAllTimers() {
            timerIds.forEach(id => clearTimeout(id));
            timerIds = [];
        }

        // 清除所有弹窗
        function clearAllPopups() {
            // 复制数组以避免在循环中修改原数组导致的问题
            const popupsToRemove = [...popups];
            popupsToRemove.forEach(popup => {
                // 移除淡出动画类（如果存在）
                popup.classList.remove("fade-out");
                // 直接移除元素
                if (popup.parentNode) {
                    popup.parentNode.removeChild(popup);
                }
            });
            // 清空弹窗数组
            popups = [];
            
            // 清除所有计时器
            clearAllTimers();
            
            // 显示按钮
            showButtons();
        }
    </script>
</body>

</html>